import React , {useEffect,useState}from 'react'
import { Tabs } from 'react-vant';
import axios from "axios"
import Item from './components/Item';
function TabsClass() {
    const [data,setData] = useState([])
    const [dataChildren,setdataChildren] = useState([])
    useEffect(()=>{
        axios.get("/tabs").then(res=>{
            console.log(res.data.list);
            setData(res.data.list)
            setdataChildren(res.data.list[0].children)
        })
    },[])
    const setActive = (el)=>{
        console.log(el);
        setdataChildren(data[el].children)
    }
  return (
    <div className='app'>
        TabsClass
        <Tabs active={0} onChange={setActive}>
            {
                data&&data.map((item) => (
                    <Tabs.TabPane key={item.id} title={`标签${item.title}`}>
                        <Item  dataChildren={dataChildren}/>
                       
                    </Tabs.TabPane>)
                )
            }
    </Tabs>
    </div>
  )
}

export default TabsClass